<template>
  <div v-if="source.data.id && source.data.cellData" class="OctopusAppList">
    <van-list v-model="loading" :finished="finished" finished-text="已经到底啦～"
              @load="loadData" v-if="active" v-bind:class="'Content ' + (isOperation ? 'ContentMask':'') ">
      <template slot="default">
        <div class="List" v-for="row in list.data">
          <!--   slot教程  https://www.cnblogs.com/lingXie/p/11420183.html-->
          <!--  将接收render组件，并通过row返回数据供开发人员回调使用  -->
          <slot name="render" :data="{row:row,cell:source.data.cellData}"></slot>
          <!--  支持row和default 2种 标签-->
          <slot name="default" :data="{row:row,cell:source.data.cellData}"></slot>
        </div>
      </template>
    </van-list>

    <van-tabbar class="Operation" :fixed="true" v-if="isOperation">
      <van-tabbar-item name="home">
        <template v-for="button in source.button">
          <van-button :type="button.class" v-on:click="button.click">{{button.text}}</van-button>
        </template>
        <template>
          <van-button type="info" v-if="created" v-on:click="create">提交</van-button>
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
  <div v-else>Octopus Framework Initialization Exception.</div>
</template>

<script>
  export default {
    name: 'ListEngine', /* 这个name暂时不知道用啥用，根据官方文档说的是方便排错的 */
    data() {
      return {
        octopus: this.$parent.octopus,
        // app端滑动分页，所以这里的list为全局list，分页自动追加。
        list: {
          data: []
        },
        isShowList: false,
        isOperation: false,
        indexData: 1,
        loading: false,
        finished: false,
        active: true
      }
    },
    created: function () {
      // 初始化查询数据，对前端数据进行整理。
      this.init();
      // console.log("created: " + JSON.stringify(this.source.data.id));
      // 获取父级的父级的属性
      // this.$parent.$parent.octopus.tips.debug("Octopus List Engin Is Load.");
      this.octopus.tips.debug("[" + this.source.data.id + "] AppListEngine执行了created事件。");
    },
    mounted: function () {
      this.octopus.tips.debug("[" + this.source.data.id + "] AppListEngine执行了mounted事件。");
    },
    activated: function () {
      this.init();
      this.octopus.tips.debug("[" + this.source.data.id + "] AppListEngine执行了activated事件。");
    },
    deactivated: function () {
      this.active = false; // 活动状态设置为false
      this.octopus.tips.debug("AppListEngine.vue执行了deactivated事件。");
    },
    destroyed() {
      this.isShowList = false;
    },
    computed: {
      // 可参考标准List控件。
    },
    methods: {
      init: function () {
        // 如果存在 原生 或 自定义按钮。
        if (this.created || this.source.button) {
          this.isOperation = true;
        }

        this.reload();
      },
      reset: function () {
        this.$set(this.list, "data", []);
        this.indexData = 1;
        this.finished = false;
        this.loading = false;
        this.active = true;
      },
      loadData: function () {
        let o = this;
        // 设置索引
        if (!this.source.data.pageData) {
          this.source.data.pageData = {};
        }
        this.source.data.pageData.index = this.indexData;
        // 获取子系统数据（带权限）
        this.octopus.request.api.post("/Octopus/Engine/List", this.source.data,
          // 处理回调事件，通过分析data.status.code的状态来实现。
          function (data) {
            if (data.status.code == 200) {
              // 加载之前，需要注意的是此时数据并不完整，只是刚从后台获取到。
              if (o.loadBefore) {
                o.loadBefore(data);
              }
              // 二次进入时有数据则只更新cellData, queryData,pageData部分。
              if (o.source.data.queryData) {
                o.$set(o.source.data, "cellData", data.content.cellData);
                o.$set(o.source.data, "queryData", data.content.queryData);
                o.$set(o.source.data, "pageData", data.content.pageData);
              }
              // 首次加载，进行全量更新。
              else {
                // 新增属性，需要使用$set，详细参考：https://blog.csdn.net/panyang01/article/details/76665448
                o.$set(o.source, "data", data.content);
              }

              // 追加数据
              $(data.content.queryData).each(function (index, item) {
                o.list.data.push(item);
              });
              // 执行完，分页+1
              o.indexData += 1;

              if (o.indexData > data.content.pageData.totalPages) {
                o.finished = true;
              }

              if (o.loaded) {
                o.loaded(data);
              }
            } else {
              o.octopus.tips.error(data);
            }
            // 加载状态结束
            o.loading = false;
          });
      },
      reload: function () {
        // 每次激活，重新加载
        this.$set(this.list, "data", []);
        this.indexData = 1;
        this.finished = false;
        this.loading = true;
        this.active = true;// 活动状态设置为true
        if (!this.isShowList) {
          this.isShowList = true;
          return;
        }
        if (!this.finished) {
          this.loadData()
        }
        this.octopus.tips.debug("AppListEngine执行了reload事件。");
      },
    },
    watch: {
      // 可参考标准List控件。
    },
    props: ["source", "loadBefore", "loaded", "created", "exported", "searched", "paged", "viewed", "modified", "deleted"]
  }
</script>

/*  scoped的意思是这里的样式只对当前页面有效不会影响其他页面，还有可以设置lang="scss"就是支持css预编译，也就是支持sass或者less  */
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }
</style>
